
<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--表单组件-->
      <crudOperation :permission="permission" />

      <el-dialog title="表格配置" :visible.sync="tableConfigShow" width="60%">
        <j-table-column-config :columns.sync="header" @tabSave="saveHead" />
      </el-dialog>
      <!--表格渲染-->
      <vue-context-menu
        :contextMenuData="contextMenuData"
        @tableConfig="tableConfig"
        @selection-change="crud.selectionChangeHandler"
      ></vue-context-menu>
      <el-table
        ref="table"
        height="700"
        @contextmenu.native="showMenu"
        v-draghead="manyTableOption" @header-dragend="changeColWidth"
        stripe border show-summary :summary-method="sumRow"
        @row-click="crud.selectRow" v-loading="crud.loading"
        :data="crud.data" size="small" style="width: 100%"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" width="55" label="序号" />
        <el-table-column
          prop="busDate"
          label="业务日期"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="orderCode"
          label="单据编号"
          width="100"
        ></el-table-column>
        <el-table-column
          v-if="customerType"
          prop="sCustomerCode"
          label="二批编码"
          width="100"
        ></el-table-column>
        <el-table-column
          v-if="customerType"
          prop="sCustomerName"
          label="二批名称"
          width="100"
        ></el-table-column>
        <el-table-column
          v-if="!customerType"
          prop="customerCode"
          label="客户编码"
          width="100"
        ></el-table-column>
        <el-table-column
          v-if="!customerType"
          prop="customerName"
          label="客户名称"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="orderType"
          label="单据类型"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="deptName"
          label="部门"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="saleUserName"
          label="业务员"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="receiveAmount"
          label="应收金额"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="receiptAmount"
          label="实收金额"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="remark"
          label="单据备注"
          width="100"
        ></el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

  <script>
import crudReportCustomerReceive from "@/api/erp/reportCustomerReceive";
import CRUD, { presenter, header, form, crud } from "@crud/crud";
import rrOperation from "@crud/RR.operation";
import crudOperation from "@crud/CRUD.operation";
import udOperation from "@crud/UD.operation";
import pagination from "@crud/Pagination";
import JDialog from "../../../components/jDialog/jDialog";
import { getCustomerTypeTree } from "@/api/erp/basCustomerType";
import Treeselect from "@riophae/vue-treeselect";
import { tablemixins } from "../../../mixins/tablemixins";
import { manyTableMixin } from "../../../mixins/manyTableMixin";
import jTableColumnConfig from "@/components/jTableColumnConfig/jTableColumnConfig";
import { getCustomerAreaTree } from "../../../api/erp/basCustomerArea";
import { getDepts } from "../../../api/system/dept";
// crud交由presenter持有
const defaultCrud = CRUD({
  title: "客户应收报表明细",
  optShow: {
    add: false,
    edit: false,
    del: false,
    download: true,
    leadingIn: false,
    enable: false,
    disable: false,
    pass: false,
    reject: false,
    invalid: false,
    recover: false,
    downloadDetail: false,
    print: false,
    printDetail: false,
  },
  url: "/api/reportCustomerReceive/detail",
  sort: "",
  query: {},
  crudMethod: { ...crudReportCustomerReceive },
});
const defaultForm = {
  id: null,
  salesReceiveAmount: null,
  plasticBoxAmount: null,
  returnBoxAmount: null,
  receiptAmount: null,
  actualReceiveAmount: null,
  customerId: null,
  customerName: null,
  customerCode: null,
  fCustomerId: null,
  fCustomerName: null,
  fCustomerCode: null,
};
export default {
  name: "reportCustomerReceiveDetail",
  components: {
    JDialog,
    pagination,
    crudOperation,
    rrOperation,
    udOperation,
    Treeselect,
    jTableColumnConfig,
  },
  mixins: [
    presenter(defaultCrud),
    header(),
    form(defaultForm),
    crud(),
    manyTableMixin,
  ],
  dicts: ["common_yes_or_no"],
  data() {
    return {
      permission: {
        add: ["admin", "reportCustomerReceive:add"],
        edit: ["admin", "reportCustomerReceive:edit"],
        del: ["admin", "reportCustomerReceive:del"],
        import: ["admin", "reportCustomerReceive:import"],
        export: ["admin", "reportCustomerReceive:export"],
        copy: ["admin", "reportCustomerReceive:copy"],
        upload: ["admin", "reportCustomerReceive:upload"],
        download: ["admin", "reportCustomerReceive:download"],
      },
      rules: {},
      query: {},
      // customerAreaList:[],
      // dept:[],
      queryStr: "",
      customerType:0
    };
  },
  activated() {
    this.customerType = this.$route.query.type
    const queryStr = sessionStorage.getItem("reportCustomerReceiveDetail");
    if (this.queryStr !== queryStr) {
      this.queryStr = queryStr;
      if (this.customerType){
        this.crud.url = '/api/reportSCustomerReceive/detail'
      }else {
        this.crud.url = '/api/reportCustomerReceive/detail'
      }
      this.crud.toQuery();
    }
  },
  created() {
    //   getCustomerAreaTree().then(res => {
    //     this.customerAreaList = res.data
    //   })
    //   getDepts({status: 1}).then(res => {
    //     this.deptList = res
    //   })
  },
  mounted() {
    // this.crud.props.searchToggle = false
  },
  watch: {},
  methods: {
    // 获取数据前设置好接口地址
    [CRUD.HOOK.beforeRefresh]() {
      this.crud.query = JSON.parse(
        sessionStorage.getItem("reportCustomerReceiveDetail")
      );
      return true;
    }, // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {},
    onGet() {},
    sumRow({ columns, data }) {
      console.log(this.crud);
      const sums = [];
      for (let i in columns) {
        if (["receiveAmount",'receiptAmount'].includes(columns[i].property)
        ) {
          let selectSum = 0;
          this.$refs.table.selection.forEach((item) => {
            selectSum += +item[columns[i].property];
          });
          sums[i] = (
            <p>
              {selectSum}
              <hr />
              {this.crud.summary[columns[i].property] || 0}
            </p>
          );
        }
        sums[0] = (
          <p>
            选中
            <hr />
            合计
          </p>
        );
      }
      return sums;
    },
  },
};
</script>

  <style scoped>
.table-img {
  display: inline-block;
  text-align: center;
  background: #ccc;
  color: #fff;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  line-height: 32px;
}
</style>
